import React, { Component } from 'react'

import { Form, Icon, Input, Button, message } from 'antd';

import axios from 'axios'

class Login extends Component {

    submit = () => {
        // 验证表单
        // values: 表单中的数据
        this.props.form.validateFields((err, values) => {
            if(!err) {
                // 1. 调用登录接口
                axios.post('/admin/login', values).then(res=>{
                    if(res.data.ok === 1) {
                        // 2. 保存令牌
                        sessionStorage.setItem('token', res.data.data.token)
                        // 3. 提示成功
                        message.success('登录成功！')
                        // 4. 页面跳转
                        this.props.history.push('/')
                    } else {
                        message.error(res.data.error)
                    }
                })
            }
        })
    }

    render() {
        // 导入这个函数
        const { getFieldDecorator } = this.props.form;
        return (
            <Form className="login">
                <Form.Item hasFeedback>
                    {
                        getFieldDecorator('account', {
                            rules: [{
                                required: true,
                                message: '必须要输入账号！'
                            }]
                        })(
                            <Input 
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="请输入账号"
                            />
                        )
                    }
                </Form.Item>
                <Form.Item hasFeedback>
                    {
                        getFieldDecorator('password', {
                            rules: [{
                                required: true,
                                message: '不能为空！'
                            },{
                                pattern: /^\w{5,18}$/,
                                message: '必须是5~18位数字、字母、下划线！'
                            }]
                        })(
                            <Input.Password
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="请输入 6 ~ 18 位密码"
                            />
                        )
                    }
                </Form.Item>
                <Form.Item>
                    <Button type="primary" onClick={this.submit}>登录</Button>
                </Form.Item>
            </Form>
        )
    }
}

// 把 Form 组件放到 Login 组件中
export default Form.create()(Login)
